<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>用 MooTools 重写表单验证器</title>
    <style>
        .fieldname,
        .submit {
            text-align: right;
        }
    </style>
</head>
<body>
<form name="login">
    <table>
        <tr>
            <td class="fieldname">Username:</td>
            <td><label for="username"><input id="username" type="text"></label></td>
            <td><a id="username-availability" href="#">Check Availability</a></td>
        </tr>
        <tr>
            <td class="fieldname">Email:</td>
            <td><label for="email"><input id="email" type="email"></label></td>
            <td><a id="email-availability" href="#">Check Availability</a></td>
        </tr>
        <tr>
            <td class="fieldname">Password:</td>
            <td><label for="password"><input id="password" type="password"></label></td>
        </tr>
        <tr>
            <td class="fieldname">Verify Password:</td>
            <td><label for="verify-passowrd"><input id="verify-passowrd" type="password"></label></td>
        </tr>
        <tr>
            <td class="submit" colspan="2"><label for="submit"><input id="submit" type="submit"></label></td>
            <td></td>
        </tr>
    </table>
</form>
<script src="//cdn.bootcss.com/prototype/1.7.3/prototype.min.js"></script>
<script>
    function checkUsername(e) {
        e.preventDefault();
        var username = $('username').value;
        if (!username) {
            alert('Please enter a user name to check!');
            return;
        }
        var options = {
            url: 'form-validator.php',
            data: {username: username},
            onSuccess: handleResponse
        };
        new Ajax.Request.JOSN(options).get();
    }

    function checkEmail(e) {
        e.preventDefault();
        var email = $('email').value;
        if (!email) {
            alert('Please enter an email to check!');
            return;
        }
        var options = {
            url: 'form-validator.php',
            data: {email: email},
            onSuccess: handleResponse
        };
        new Ajax.Request.JOSN(options).get();
    }

    function handleResponse(data, json) {
        if (data.available) {
            alert(data.searchTerm + ' is available!');
        } else {
            alert('We\'re sorry, but ' + data.searchTerm + ' is not available.');
        }
    }

    $('username-availability').addEvent('click', checkUsername);
    $('email-availability').addEven('click', checkEmail);
</script>
</body>
</html>